<template>
  <div class='container'>
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="$route.query.name">
        <el-breadcrumb-item :to="{ path: 'list' }">学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 表单 -->
      <el-form size="small" :inline="true" :model="formData" ref="formData" class="demo-form-inline">
        <el-form-item label="目录名称：" style="margin-right:50px" prop="directoryName">
          <el-input v-model="formData.directoryName"></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="state">
          <el-select placeholder="请选择" v-model="formData.state">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
        <el-form-item style="float:right">
          <div>
            <a
              class="el-icon-back"
              style="color: #108EE9;
              margin-right:5px"
              v-show="$route.query.id"
              @click="$router.push('list')">返回学科</a>
            <el-button type="success" icon="el-icon-edit" @click="addDirectory">新增目录</el-button>
          </div>
        </el-form-item>
      </el-form>
      <!-- alert警告 -->
      <el-alert
        style="margin-bottom:20px"
        v-show="tableData !== ''"
        :title="'数据一共' + counts + '条'"
        type="info"
        show-icon
        :closable="false">
      </el-alert>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading">
        <el-table-column
          prop="id"
          label="序号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
          width="100">
        </el-table-column>
        <el-table-column
          prop="directoryName"
          label="目录名称"
          width="130">
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者"
          width="150">
        </el-table-column>
        <el-table-column
          label="创建日期">
          <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          prop="totals"
          label="面试题数量"
          width="180">
        </el-table-column>
        <el-table-column
          label="状态"
          width="100">
          <template slot-scope="scope">
            {{scope.row.state == '1' ? '已启用' : '已禁用'}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="160">
          <template slot-scope="scope">
            <el-button type="text" @click="switchSate(scope.row)">{{scope.row.state == '1' ? '禁用' : '启用'}}</el-button>
            <el-button type="text" :disabled="scope.row.state == '1'" @click="hEdit(scope.row)">修改</el-button>
            <el-button type="text" :disabled="scope.row.state == '1'" @click="hDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      style="margin-top:20px; float:right"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="counts"
        @current-change="changePage"
        @size-change="changePageSize">
      </el-pagination>
    </el-card>
    <!-- 添加目录模块 addDire添加目录刷新  hUpdateDire-修改传参-->
    <directorys-add ref="addDirectory" @addDire="hAddDire" :modifyData="modifyData" @updateDire="hUpdateDire"></directorys-add>
  </div>
</template>

<script>
// 导入list-目录列表 changeState-目录状态 remove-删除
import { list, changeState, remove } from '@/api/hmmm/directorys'
// 导入状态
import { status } from '@/api/hmmm/constants'
// 导入添加目录模块
import DirectorysAdd from '@/module-hmmm/components/directorys-add'
export default {
  name: 'directoryIndex',
  components: { DirectorysAdd },
  data () {
    return {
      // 表单数据对象
      formData: {
        directoryName: '',
        state: null,
        page: 1,
        pagesize: 10
      },
      // 总记录数
      counts: 0,
      // 目录列表
      tableData: [],
      loading: false,
      // 对话框
      dialogVisible: false,
      modifyData: {
        id: null,
        directoryName: '',
        subjectID: null,
        subjectName: ''
      }
    }
  },
  computed: {
    status () {
      return status
    }
  },
  created () {
    this.getDirectoryList()
  },
  watch: {
    '$route.query.id': function () {
      this.getDirectoryList()
    }
  },
  methods: {
    // 获取目录列表
    async getDirectoryList () {
      this.loading = true
      try {
        var res
        if (this.$route.query.id) {
          const data = {
            ...this.formData,
            subjectID: this.$route.query.id
          }
          res = await list(data)
        } else {
          res = await list(this.formData)
        }
        // const res = await list(this.formData)
        // console.log(res)
        this.counts = res.data.counts
        this.tableData = res.data.items
        this.loading = false
      } catch (error) {
        console.log(error)
      }
    },
    // 清除，重置搜索条件
    resetForm () {
      this.$refs.formData.resetFields()
      this.getDirectoryList()
    },
    // 点击搜索
    onSubmit () {
      this.formData.page = 1
      this.getDirectoryList()
    },
    // 改变当前页
    changePage (newPage) {
      this.formData.page = newPage
      this.getDirectoryList()
    },
    // 改变每页条数
    changePageSize (newSize) {
      this.formData.pagesize = newSize
      this.getDirectoryList()
    },
    // 状态切换
    switchSate (row) {
      const permit = '此操作将启用该试题, 是否继续?'
      const prohibit = '此操作将禁用该试题, 是否继续?'
      this.$confirm(row.state ? prohibit : permit, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(row)
        // if (row.state) {
        //   row.state = 0
        // } else {
        //   row.state = 1
        // }
        row.state = row.state ? 0 : 1
        // 这个是把列表中的数据传过来
        const data = {
          id: row.id,
          state: row.state
        }
        // 这个是状态接口由上边带过来的值
        await changeState(data)
        this.getDirectoryList()
        this.$message({
          type: 'success',
          message: row.state ? '启用成功!' : '禁用成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: row.state ? '取消禁用!' : '取消启用!'
        })
      })
    },
    // 新增目录
    addDirectory () {
      this.$refs.addDirectory.openDialog()
    },
    // 添加目录完成后刷新
    hAddDire () {
      this.getDirectoryList()
    },
    // 点击修改
    hEdit (row) {
      console.log(row)
      this.$refs.addDirectory.openDialog()
      const { id, directoryName, subjectName, subjectID } = row
      this.modifyData = {
        id,
        directoryName,
        subjectName,
        subjectID
      }
    },
    // 子组件修改后的数据
    hUpdateDire (data) {
      this.tableData.find(item => {
        if (item.id === data.id) {
          item = data
        }
      })
      this.getDirectoryList()
    },
    // 删除数据
    hDel (row) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        console.log(res)
        // 提示
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getDirectoryList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.el-breadcrumb {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}
/deep/ .el-breadcrumb__inner.is-link {
  color: #606266 !important;
}
</style>
